window.onload = function () {

    initTable();

}

function initTable() {
    initTableHeader();
    initTableBody();
}

function initTableHeader() {

    var list = document.getElementById('list');
    var theader = document.createElement('thead');

    var thRow = document.createElement('tr');

    var thForName = document.createElement('th');
    thForName.innerText = "name";
    var thForGender = document.createElement('th');
    thForGender.innerText = "gender";
    var thForDept = document.createElement('th');
    thForDept.innerText = "dept";

    thRow.appendChild(thForName);
    thRow.appendChild(thForGender);
    thRow.appendChild(thForDept);

    theader.appendChild(thRow);

    list.appendChild(theader);

}

function initTableBody() {

    var list = document.getElementById('list');
    var tableBody = document.createElement('tbody');

    for (var key in employees) {

        var tRow = document.createElement('tr');

        tRow.onclick=function () {
           alert(this.children[0].innerText)
        }

        /*  var tdForName = document.createElement('td');
          tdForName.innerText=employees[key]['name'];
          // tdForName.innerText = employees[key].name; // employees[key]['name']

          var tdForGender = document.createElement('td');
          tdForGender.innerText=employees[key]['gender'];
         // tdForGender.innerText = employees[key].gender;

          var tdForDept = document.createElement('td');
          tdForDept.innerText=employees[key]['dept']['name'];
         // tdForDept.innerText = employees[key].dept.name;*/

        /*  tRow.appendChild(tdForName);
         tRow.appendChild(tdForGender);
         tRow.appendChild(tdForDept);*/

        for (var key2 in employees[key]) {
            if (key2 != 'id') {
                var tData = document.createElement('td');
                tData.innerText = employees[key][key2]
                tRow.appendChild(tData);
            }
        }

        var tdForCommand = document.createElement('td');
        var btnRemove = document.createElement('button');
        btnRemove.innerText ="删除";
        tdForCommand.appendChild(btnRemove);
        tRow.appendChild(tdForCommand);

        tableBody.appendChild(tRow);
    }
    list.appendChild(tableBody);
}